<template>
  <div style="width: 100%">
    <div style="margin-bottom: 10px">
      应用到属性：
      <el-select size="medium" v-model="applyAttribute" :disabled="disabled">
        <template v-for="{name} in selectProperties">
          <el-option :label="name" :value="name"></el-option>
        </template>
      </el-select>
    </div>
    <div>
      <el-button size="medium" :disabled="disabled" type="primary" @click="$refs['gdcd'].open(data)">
        选择已有的
      </el-button>
      <el-button size="medium" :disabled="disabled" type="danger" @click="remove">
        清空
      </el-button>

      <div class="showProperties">
        <template v-for="{label,value} in selectionJson">
          <div>
            <span>{{ label }}：</span>
            <el-input :value="value" size="small" disabled></el-input>
          </div>
        </template>
      </div>
    </div>
    <avue-crud v-if="false" :option="{...option,header:true,column}"
               :table-loading="loading"
               :data="data"
               ref="crud">
      <template slot="menuLeft">
        <el-button size="medium" :disabled="disabled" type="primary" @click="$refs['gdcd'].open(data)">
          选择已有的
        </el-button>
        <el-button size="medium" :disabled="disabled" type="danger">清空</el-button>
      </template>
    </avue-crud>

    <get-data-common-dialog title="选择已有编码配置"
                            ref="gdcd"
                            :limit="1"
                            :column="column"
                            :source-data="settingsJson"
                            @addToList="addToList">
    </get-data-common-dialog>
  </div>
</template>
<script>
import GetDataCommonDialog from "@/views/DMDComponent/getDataCommonDialog.vue";

export default {
  name: "codeRules",
  components: {GetDataCommonDialog},
  inject: ["dialogType"],
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    option: {
      type: Object,
      default: () => {
        return {}
      }
    },
    allFormData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    show: {
      type: Boolean,
      default: () => {
        return false
      }
    },
  },
  data() {
    return {
      loading: false,
      data: [],
      column: [
        {
          label: '中文名称',
          prop: 'name',
        },
        {
          label: "配置类型",
          prop: "settingType",
        },
        {
          label: "创建时间",
          prop: "createTime",
        },
        {
          label: "修改时间",
          prop: "modifyTime",
        }
      ],
      applyAttribute: ""
    }
  },
  computed: {
    selectionJson() {
      if (this.data.length > 0) {
        return JSON.parse(this.data[0].settingsJson).rules
      }
      return [];
    },
    settingsJson() {
      let data = [];
      let interfaceSettings = this.deepCopy(this.item.interfaceSettings)
      if (this.item.interfaceSettings && this.item.interfaceSettings.length > 0) {
        interfaceSettings.forEach(item => {
          data.push({...item, interfaceId: this.item.interfaceId});
        })
      }
      return data;
    },
    selectProperties() {
      const {attributes, step3, extendsAttribute} = this.allFormData();
      let data = attributes && attributes.length > 0 && attributes ? attributes : (step3 ? step3 : []);
      return [...extendsAttribute, ...data];
    },
    disabled(){
      return this.dialogType() === 'view';
    }
  },
  methods: {
    remove() {
      this.$emit("removeFunctionInterfaces", this.data)
      this.data = [];
    },
    addToList(list) {
      this.data = list;
      this.$refs["gdcd"].close();
    },
    getData() {
      if (this.data.length === 0) {
        return {data: this.data, isNull: this.data.length === 0, flag: true};
      } else {
        if (!this.applyAttribute) this.$message.warning("请选择应用到属性");

        let obj = this.deepCopy(this.data[0]);
        let {settingsJson} = obj;
        settingsJson = JSON.parse(settingsJson);
        Object.assign(settingsJson, {apply_attribute: this.applyAttribute, interfaceId: this.item.interfaceId})
        Object.assign(obj, {settingsJson: JSON.stringify(settingsJson)})
        return {
          data: [obj], isNull: this.data.length === 0, flag: !!this.applyAttribute
        };
      }
    }
  },
  watch: {
    show: {
      handler(v) {
        if (v) {
          let formData = this.deepCopy(this.allFormData().functionInterfaces);
          if (formData.length > 0) {
            formData.forEach(item => {
              if (item.oid === this.item.interfaceId) {
                if (!!item.settingsJson) {
                  this.data = [item];

                  let s = JSON.parse(item.settingsJson)
                  this.applyAttribute = s.apply_attribute ? s.apply_attribute : '';
                }
              }
            })
          }
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
<style scoped lang="scss">
.showProperties {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 20px;

  > div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    > span {
      line-height: 36px;
      display: inline-block;
      width: 150px;
      text-align: right;
    }
  }
}
</style>
